<template>
  <div class="music-manage-container">
    <!-- 左侧导航栏 -->
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu router>
        <el-menu-item index="/music/latest">飙升榜</el-menu-item>
        <el-menu-item index="/music/hot">热歌榜</el-menu-item>
        <el-menu-item index="/music/new">新歌榜</el-menu-item>
        <el-menu-item index="/music/trend">流行指数榜</el-menu-item>
        <el-menu-item index="/music/original">腾讯音乐人原创榜</el-menu-item>
        <el-menu-item index="/music/recognition">听歌识曲榜</el-menu-item>
        <el-menu-item index="/music/mv">MV榜</el-menu-item>
        <el-submenu index="2">
          <template slot="title">地区榜</template>
          <el-menu-item index="/music/china">内地榜</el-menu-item>
          <el-menu-item index="/music/hongkong">香港地区榜</el-menu-item>
          <el-menu-item index="/music/taiwan">台湾地区榜</el-menu-item>
          <el-menu-item index="/music/europe">欧美榜</el-menu-item>
          <el-menu-item index="/music/korea">韩国榜</el-menu-item>
          <el-menu-item index="/music/japan">日本榜</el-menu-item>
        </el-submenu>
        <el-menu-item index="/music/joox">JOOX本地热播榜</el-menu-item>
        <el-menu-item index="/music/tvb">香港TVB劲歌金榜</el-menu-item>
        <el-menu-item index="/music/kkbox">台湾KKBOX榜</el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 右侧内容区域 -->
    <el-main>
      <h2>流行指数榜 2025-03-09 榜单规则</h2>
      
      <!-- 顶部操作按钮 -->
      <div class="top-buttons">
        <el-button type="success" @click="playAll">▶ 播放全部</el-button>
        <el-button>✚ 添加到</el-button>
        <el-button>⬇ 下载</el-button>
        <el-button>⋮ 批量操作</el-button>
        <el-button>💬 评论 (257541)</el-button>
      </div>

      <!-- 歌曲列表 -->
      <el-table :data="paginatedMusicList" stripe style="width: 100%">
        <el-table-column prop="rank" label="排名" width="50"></el-table-column>
        <el-table-column prop="cover" label="封面" width="100">
          <template slot-scope="scope">
            <img :src="scope.row.cover" alt="歌曲封面" style="width: 100%; height: auto;">
          </template>
        </el-table-column>
        <el-table-column prop="songName" label="歌曲">
          <template slot-scope="scope">
            {{ scope.row.songName }}
            <span v-if="scope.row.isVIP" style="color: green;">[VIP]</span>
            <span v-if="scope.row.hasMV" style="color: blue;">[MV]</span>
          </template>
        </el-table-column>
        <el-table-column prop="singer" label="歌手"></el-table-column>
        <el-table-column prop="duration" label="时长"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" icon="el-icon-video-play" circle></el-button>
            <el-button size="mini" icon="el-icon-plus" circle></el-button>
            <el-button size="mini" icon="el-icon-share" circle></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="musicList.length">
        </el-pagination>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "MusicManage",
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      musicList: [
        { rank: 1, cover: 'https://placehold.co/100x100', songName: 'spr.', singer: '宋亚轩', duration: '03:13', isVIP: false, hasMV: false },
        { rank: 2, cover: 'https://placehold.co/100x100', songName: '你不是不爱了吧', singer: 'Aroex7', duration: '03:02', isVIP: true, hasMV: false },
        { rank: 8, cover: 'https://placehold.co/100x100', songName: 'Baby, Don\'t Cry (人鱼的眼泪) (Chinese Ver.)', singer: 'EXO', duration: '03:55', isVIP: true, hasMV: false }
      ],
      activeTab: 'latest',
    };
  },
  computed: {
    paginatedMusicList() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.musicList.slice(start, end);
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    playAll() {
      console.log('播放全部');
    },
    handleTabClick(tab) {
      this.activeTab = tab.name;
      this.filterMusicByTab();
    },
    filterMusicByTab() {
      // 根据标签筛选音乐列表的逻辑
      // 示例：this.musicList = this.allMusicList.filter(music => music.region === this.activeTab);
    }
  }
};
</script>

<style scoped>
.music-manage-container {
  display: flex;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: box-shadow 0.3s ease-in-out;
  height: 90%;
}

.music-manage-container:hover {
  box-shadow: 0 8px 16px rgba(139, 231, 99, 0.3);
}
.el-menu {
  border-radius: 20px;
  border-right: solid 1px #e6e6e6;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #FFF;
}
.el-aside {
  padding: 24px;
  background-color: rgb(238, 241, 246);
  border-radius: 12px 0 0 12px;
}

.el-main {
  padding: 24px;
  background-color: #ffffff;
  border-radius: 0 12px 12px 0;
}

.top-buttons {
  margin-bottom: 24px;
}

.pagination {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-button {
  border-radius: 8px;
  transition: transform 0.2s ease-in-out;
}

.el-button:hover {
  transform: scale(1.05);
}

/* 新增样式：选中后的el-menu-item背景色和字体颜色 */
.el-menu-item.is-active {
  background-color: #00C851 !important;
  color: #ffffff !important;
}
</style>